<template>
	<view class="goods-sort">
		<view class="box sort-border-bottom" v-if="showBtn">
			<view v-for="(item,index) in apiList" :key="index" class="box-item" :class="[activeApi == item.api ? 'active' : '']"
			 @click="selectApi(index)">
				<image v-if="activeApi == item.api" class="box-item-icon" :src="item.icon"></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="box-sort">
			<view class="box-item" :class="[sortType == 0 ? 'active' : '']" data-id="0" @click="sortTap">综合</view>
			<view class="box-item" :class="[sortType == 1 ? 'active' : '']" data-id="1" @click="sortTap">销量</view>
			<view class="box-item" :class="[sortType == 2 ? 'active' : '']" data-id="2" @click="sortTap">价格</view>
			<view class="box-item" :class="[sortType == 3 ? 'active' : '']" data-id="3" v-if="activeApi === 'pdd'" @click="sortTap">券额</view>
			<view class="box-item">
				<text class="npIcon-youhuiquan" :class="coupon ? 'npIcon-red' : ''"></text>
				<switch @change="switchCoupon" :class="coupon?'checked':''" style="transform: scale(0.7,0.7)" :checked="coupon?true:false"></switch>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sortType: 0,
				showSelect: false,
				activeIndex: 0,
				showBtn: true,
				activeIcon: '',
				activeApi: '',
				xHeight: 80,
				apiList: [],
				coupon: false
			}
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		created() {
			this.apiList = this.list;
			// #ifdef MP-WEIXIN
			this.xHeight = uni.getSystemInfoSync()['statusBarHeight'] + 80;
			// #endif
			if (this.list.length == 1) {
				this.showBtn = false;
				this.activeApi = this.apiList[0].api;
			} else {
				this.activeIcon = this.apiList[this.activeIndex].icon;
				this.activeApi = this.apiList[this.activeIndex].api;
			}
		},
		methods: {
			toSelect() {
				this.showSelect = !this.showSelect;
			},
			switchCoupon() {
				this.coupon = !this.coupon;
				this.$emit('coupon', this.coupon);
			},
			sortTap(e) {
				this.sortType = e.currentTarget.dataset.id;
				let api = this.activeApi;
				let sortType = this.sortType;
				this.$emit('change', {
					api,
					sortType
				});
			},
			selectApi(index) {
				this.activeIndex = index;
				let list = this.apiList;
				let sortItem = this.apiList[index];
				this.activeIcon = sortItem.icon;
				this.activeApi = sortItem.api;
				list.forEach(item => {
					if (item.api === sortItem.api) {
						item.disabled = true;
					} else {
						item.disabled = false;
					}
				});
				let api = this.activeApi;
				let sortType = this.sortType;
				this.$emit('change', {
					api,
					sortType
				});
			}
		}
	}
</script>

<style>
	.goods-sort {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		background: #FFFFFF;
	}

	.box {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 34rpx;
		padding: 0 30rpx;
	}

	.box-sort {
		width: 100%;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28rpx;
		padding: 0 30rpx;
	}

	.box-item {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.box-item-icon {
		width: 38rpx;
		height: 38rpx;
		margin-right: 5rpx;
	}

	.active {
		color: #e54d42;
		font-weight: bold;
	}

	.select-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 5rpx;
	}

	.btn {
		height: 48rpx;
		line-height: 48rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		background-color: #007AFF;
		border-radius: 10rpx;
		text-align: center;
		padding: 0 20rpx;
	}
	
	.sort-border-bottom {
		border-bottom: 1rpx #f7f7f7 solid;
	}

	.npIcon-youhuiquan {
		font-size: 36rpx;
	}
	
	.npIcon-red {
		color: #FF5500;
	}
</style>
